import React from "react"
import { Database, ShieldCheck, Users } from "lucide-react"
import ButtonCard from "../../card/button-card"

const caseList = [
  {
    title: "智能客服系统",
    description: "构建基于大语言模型的智能客服，自动处理80%的常见问题",
    icon: <Users className="w-16 h-16 text-white" />,
    iconBackground: "from-blue-400 to-indigo-600"
  },
  {
    title: "数据处理管道",
    description: "自动化数据清洗、转换和分析流程，提升数据团队效率",
    icon: <Database className="w-16 h-16 text-white" />,
    iconBackground: "from-green-400 to-teal-600"
  },
  {
    title: "内容安全审核",
    description: "多模型协同审核用户生成内容，确保平台内容安全合规",
    icon: <ShieldCheck className="w-16 h-16 text-white" />,
    iconBackground: "from-purple-400 to-pink-600"
  }
]

/**
 * 示例展示区域
 */
const SectionCase = () => {
  return (
    <section className="py-20">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">应用案例</h2>
          <p className="text-xl text-text-secondary max-w-2xl mx-auto">
            看看我们的客户如何使用 Flow Forge 解决实际业务问题
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {caseList.map((item) => (
            <ButtonCard key={item.title} {...item} />
          ))}
        </div>
      </div>
    </section>
  )
}

export default SectionCase
